<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>环境云API - 像素小站</title>
	<link rel="shortcut icon" type="image/x-icon" href="../../../lv5/public/favicon.ico">
	<link rel="stylesheet" href="/tp5/public/static/css/index.css">
	<link rel="stylesheet" href="/tp5/public/static/css/common.css">
  </head>
  <body>
      <div id="app">
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#2EAF58"
            text-color="#fff"
            active-text-color="#fff">
            <img src="/tp5/public/static/img/logo-w.png" style="width: 40px;" alt="">
            <a href="https://www.fxpixels.site/tp5/public/index.php"><el-menu-item index="1">首页</el-menu-item></a>
            <el-menu-item index="2"><a href="https://www.fxpixels.site/tp5/public/index.php/api">API 文档</a></el-menu-item>			
            <el-menu-item index="3">关于</el-menu-item>
          </el-menu>
          <el-main>
          <el-row :gutter="10">
              <el-col :span="14" :offset="5">
								<el-row>
									<el-col :span="6">
										<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
									</el-col>
									<el-col :span="16">
										<div>公共资源下载</div>
										<div class="city-num">
											<img src="" alt="">
											<div>
												<p>城市编码表<el-button type="success">成功按钮</el-button></p>
												<p>提供2565个城市对应的城市编码，以便调用环境云提供的各类数据接口。</p>
											</div>
										</div>
										<div class="weather-phenomenon">
											<img src="" alt="">
											<div>
												<p>天气现象表<el-button type="success">成功按钮</el-button></p>
												<p>提供天气现象一览表，以及对应的天气图标。</p>
											</div>
										</div>
										<div class="api">
											<div class="api-title">API Version 2.0 文档</div>
											<p><span>基础URL</span>&nbsp;<span>http://service.envicloud.cn:8082</span></p>
											表格
											<div class="api-content">
												<div>
													<p>天气预报查询</p>
													<hr>
													<div>
														<span>接口说明</span><span>根据城市编码查询指定城市7天天气预报和生活指数</span>
													</div>
													<div>
														<span>数据更新</span><span>每天9点</span>
													</div>
													<div><span>GET</span><span>/v2/weatherforecast/{accesskey}/{citycode}</span>
														<el-collapse>
															<el-collapse-item title="一致性 Consistency" name="1">
																<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
																<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
															</el-collapse-item>
														</el-collapse>
													</div>
												</div>
											</div>
										</div>
									</el-col>
								</el-row>
              </el-col>
          </el-row>
			</el-main>
    </div>
    <!-- built files will be auto injected -->
    <script src="/api/tp5/public/static/js/vue.js"></script>
	<script src="/api/tp5/public/static/js/index.js"></script>
	<script src="/api/tp5/public/static/js/echarts.common.min.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: function() {
				return {
                    data: [{
                      label: '一级 1',
                      children: [{
                        label: '二级 1-1',
                        children: [{
                          label: '三级 1-1-1'
                        }]
                      }]
                    }, {
                      label: '一级 2',
                      children: [{
                        label: '二级 2-1',
                        children: [{
                          label: '三级 2-1-1'
                        }]
                      }, {
                        label: '二级 2-2',
                        children: [{
                          label: '三级 2-2-1'
                        }]
                      }]
                    }, {
                      label: '一级 3',
                      children: [{
                        label: '二级 3-1',
                        children: [{
                          label: '三级 3-1-1'
                        }]
                      }, {
                        label: '二级 3-2',
                        children: [{
                          label: '三级 3-2-1'
                        }]
                      }]
                    }],
                    defaultProps: {
                      children: 'children',
                      label: 'label'
                    }
                };
			},
            methods: {
                handleNodeClick(data) {
                    console.log(data);
                },
            },
		});
	</script>
	 
  </body>
</html>
